<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>svg编辑器</title>
    <style>
        body {
            /* background-color: #0f0; */
        }

        img {
            border: 1px solid #000;
            background-color: transparent;
            /* Firefox */
            image-rendering: -moz-crisp-edges;
            /* Opera */
            image-rendering: -o-crisp-edges;
            /* Webkit (non-standard naming) */
            image-rendering: -webkit-optimize-contrast;
            image-rendering: crisp-edges;
            /* IE (non-standard property) */
            -ms-interpolation-mode: nearest-neighbor;
        }

        .textarea {
            /* width: 400px; */
            /* height: 120px; */
            min-height: 20px;
            max-width: 20%;
            margin-left: auto;
            margin-right: auto;
            display: inline-block;
            padding: 3px;
            outline: 0;
            border: 1px solid #a0b3d6;
            font-size: 12px;
            line-height: 24px;
            padding: 2px;
            word-wrap: break-word;
            overflow-x: hidden;
            overflow-y: auto;

            border-color: rgba(82, 168, 236, 0.8);
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
        }
    </style>
</head>

<body>
    <!-- <img src="" alt="">
    <img src="" alt=""> -->
    <!-- <div id="svg-box"></div> -->
    <!-- <div class="textarea" contenteditable="true"><br /></div> -->
        <img src="/assets/image/picture/QQScLauncher.exe_64.png" alt="">
</body>

<script>
    function arcToBezier(r, cx, cy, startAngle, endAngle) {
        var x0 = cx + Math.cos(startAngle) * r;
        var y0 = cy + Math.sin(startAngle) * r;
        var x3 = cx + Math.cos(endAngle) * r;
        var y3 = cy + Math.sin(endAngle) * r;
        var addAngle = endAngle - startAngle;
        var a = 4 * Math.tan(addAngle / 4) / 3;
        var x1 = x0 - a * (y0 - cy);
        var y1 = y0 + a * (x0 - cx);
        var x2 = x3 + a * (y3 - cy);
        var y2 = y3 - a * (x3 - cx);
        return { "x0": x0, "y0": y0, "x1": x1, "y1": y1, "x2": x2, "y2": y2, "x3": x3, "y3": y3 };
    }

    console.log(arcToBezier(Math.sqrt(544), 50, 50, 4 * Math.PI - Math.asin(20 / Math.sqrt(544)), Math.asin(20 / Math.sqrt(544))))
</script>

</html>